<template>
  <view class="container">
    <button v-if="showGetUserBtn" class="auth-btn" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
    <!-- <view class="search">
      <u-search placeholder="请输入关键字" v-model="keyword" @search="onSearch"></u-search>
    </view> -->
    <u-swiper :list="bannerList" name="thumb" @click="onToTabbar3(4)"></u-swiper>
    <view class="navs">
      <view class="nav" @click="onToTabbar3(1)">
        <image src="../../static/assets/nav1.png" mode="" class="nav-icon"></image>
        <view class="nav-name">公告</view>
      </view>
      <view class="nav" @click="onToTabbar3(2)">
        <image src="../../static/assets/nav2.png" mode="" class="nav-icon"></image>
        <view class="nav-name">通知</view>
      </view>
      <view class="nav" @click="onToTabbar2">
        <image src="../../static/assets/nav3.png" mode="" class="nav-icon"></image>
        <view class="nav-name">商品</view>
      </view>
      <view class="nav" @click="onToTabbar3(4)">
        <image src="../../static/assets/nav4.png" mode="" class="nav-icon"></image>
        <view class="nav-name">资讯</view>
      </view>
    </view>
    <view class="recommend">
      <view class="r-header">
        <view class="r-title">
          <image src="../../static/assets/hot.png" mode="" class="r-title-icon"></image>
          <text>热门推荐</text>
        </view>
        <!-- <view class="r-more">更多</view> -->
      </view>
      <view class="r-lists">
        <view v-for="(item, i) in goodsList" :key="i" class="r-list" @click="onViewShop(item)">
          <image class="r-list-cover" :src="item.thumb" mode="aspectFill"></image>
          <view class="r-list-info">
            <view class="r-list-title">{{ item.goodsName }}</view>
            <view class="r-list-rl">{{ item.description }}</view>
            <view class="r-list-price">￥{{ item.shopPrice }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="banner" @click="onToTabbar3(4)">
      <image src="https://junhe.junhejiuye.cn/upload/image/index.png?v=12" mode="widthFix" class="banner-img"></image>
    </view>
    <view class="article">
      <view class="r-header">
        <view class="r-title">
          <image src="../../static/assets/zixun.png" mode="" class="r-title-icon"></image>
          <text>热门资讯</text>
        </view>
        <!-- <view class="r-more">更多</view> -->
      </view>
      <view v-for="(item, i) in articleList" :key="i" class="item"  @click="onViewArticle(item)">
        <view class="item-cover">
          <image :src="item.thumb" class="cover" mode=""></image>
        </view>
        <view class="item-main">
          <view class="im-title">{{ item.title }}</view>
          <view class="im-content">
            <rich-text>{{ item.description }}</rich-text>
          </view>
          <view class="im-time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    types
  } from '../../static/libs/data.js'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        showGetUserBtn: false,
        keyword: '',
        bannerList: [],
        types,
        goodsList: [],
        articleList: [],
      }
    },
    computed: {
      ...mapGetters(['token'])
    },
    watch: {
      token() {
        console.log('watch token', token)
      }
    },
    onLoad() {
      this.getBanner()
      this.getGoods()
      this.getArtice()
      
      wx.getUserInfo({
        success: e => {
          console.log(e)
          this.showGetUserBtn = false
          if (e.errMsg === 'getUserInfo:ok') {
            const avatar = e.userInfo.avatarUrl
            this.$store.commit('setAvatar', avatar)
          }
        },
        fail: err => {
          console.log(err)
          this.showGetUserBtn = true
        }
      })
    },
    methods: {
      getBanner() {
        this.$http({
          url: '/index/getBannerList',
        }).then(res => {
          this.bannerList = res.data.bannerList
        })
      },
      getGoods() {
        this.$http({
          url: '/index/getGoodsList',
        }).then(res => {
          this.goodsList = res.data.goodsList
        })
      },
      getArtice() {
        this.$http({
          url: '/index/getArticleList',
        }).then(res => {
          this.articleList = res.data.articleList
        })
      },

      onSearch() {
        const {
          keyword
        } = this
        // uni.navigateTo({ url: `./shopList?keyword=${keyword}` })
      },
      
      onViewShop(item) {
        uni.navigateTo({
          url: `../goods/detail?id=${item.goodsId}`
        })
      },
      onViewArticle(item) {
        uni.navigateTo({
          url: `../article/detail?id=${item.articleId}`
        })
      },
      getUserInfo(e) {
        this.showGetUserBtn = false
        if (e.detail.errMsg === 'getUserInfo:ok') {
          const avatar = e.detail.userInfo.avatarUrl
          this.$store.commit('setAvatar', avatar)
        }
      },
      onToTabbar2() {
        wx.switchTab({
          url: '../goods/index'
        })
      },
      onToTabbar3(articleCategoryId) {
        this.$store.commit('setArticleCategoryId', articleCategoryId)
        wx.navigateTo({
          url: `/pages/article/index`
        })
      }
    },
    onShareAppMessage() {
      return {
        title: '君和为道',
        path: '/pages/index/index'
      }
    }
  }
</script>

<style lang="less">
  .container {
    padding: 20rpx;
    background-color: #fafafa;
    min-height: 100vh;
    .auth-btn{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      z-index: 3;
    }
    .search {
      padding-bottom: 20rpx;
    }

    .navs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 40rpx;

      .nav {
        width: 160rpx;
        text-align: center;

        .nav-icon {
          width: 80rpx;
          height: 80rpx;
          display: block;
          margin: 0 auto 20rpx;
        }

        .nav-name {
          font-size: 26rpx;
          color: #333;
        }
      }
    }

    .recommend {
      padding: 30rpx 0;
      
      .r-lists {
        display: flex;
        flex-wrap: wrap;
      }

      .r-list {
        width: calc(50% - 11rpx);
        background: #fff;
        display: flex;
        padding: 12px;
        border-radius: 8rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        &:nth-child(2n) {
          margin-left: 20rpx;
        }

        .r-list-cover {
          display: block;
          width: 120rpx;
          height: 150rpx;
          flex-shrink: 0;
          margin-right: 20rpx;
        }

        .r-list-info {
          flex: 1;
        }

        .r-list-title {
          font-size: 30rpx;
          margin-bottom: 10rpx;
          color: #333;
        }

        .r-list-rl {
          font-size: 22rpx;
          margin-bottom: 10rpx;
          color: #999;
        }

        .r-list-price {
          font-size: 28rpx;
          color: #d4380d;
        }
      }
    }

    .banner {
      .banner-img {
        width: 100%;
      }
    }
    
    .r-header {
      display: flex;
      justify-content: space-between;
    }
    
    .r-title {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      color: #333;
      display: flex;
      align-items: center;
      .r-title-icon{
        display: block;
        width: 30rpx;
        height: 30rpx;
        margin-right: 16rpx;
      }
    }
    
    .r-more {
      font-size: 26rpx;
      line-height: 80rpx;
      color: #1890ff;
    }

    .article {
      padding: 30rpx 0;
      .item {
        border-bottom: 1px solid #e8e8e8;
        padding: 10rpx 20rpx 10rpx 0;
        display: flex;

        .item-cover {
          width: 120rpx;
          margin-right: 20rpx;
        }

        .cover {
          width: 120rpx;
          height: 120rpx;
        }

        .item-main {
          flex: 1;

          .im-title {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
          }

          .im-content {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 10rpx;
          }

          .im-time {
            font-size: 24rpx;
            color: #999;

          }
        }
      }

    }
  }
</style>
